
<title>Treeview - Ace Admin</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		Treeview
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			with selectable items(single &amp; multiple) and custom icons
		</small>
	</h1>
</div><!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->

		<!-- #section:plugins/fuelux.treeview -->
		<div class="row">
			<div class="col-sm-6">
				<div class="widget-box widget-color-blue2">
					<div class="widget-header">
						<h4 class="widget-title lighter smaller">Choose Categories</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main padding-8">
							<div id="tree1" class="tree"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6">
				<div class="widget-box widget-color-green2">
					<div class="widget-header">
						<h4 class="widget-title lighter smaller">Browse Files</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main padding-8">
							<div id="tree2" class="tree"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- /section:plugins/fuelux.treeview -->
		<script type="text/javascript">
			var $assets = "../../assets";//this will be used in fuelux.tree-sampledata.js
		</script>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null,"../../assets/js/fuelux/data/fuelux.tree-sample-demo-data.js","../../assets/js/fuelux/fuelux.tree.min.js", null]
	ace.load_ajax_scripts(scripts, function() {
	  //inline scripts related to this page
		 jQuery(function($){		$('#tree1').ace_tree({			dataSource: treeDataSource ,			multiSelect:true,			loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',			'open-icon' : 'ace-icon tree-minus',			'close-icon' : 'ace-icon tree-plus',			'selectable' : true,			'selected-icon' : 'ace-icon fa fa-check',			'unselected-icon' : 'ace-icon fa fa-times'		});		$('#tree2').ace_tree({			dataSource: treeDataSource2 ,			loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',			'open-icon' : 'ace-icon fa fa-folder-open',			'close-icon' : 'ace-icon fa fa-folder',			'selectable' : false,			'selected-icon' : null,			'unselected-icon' : null		});						$('#tree1')		.on('updated', function(e, result) {			//result.info  >> an array containing selected items			//result.item			//result.eventType >> (selected or unselected)		})		.on('selected', function(e) {		})		.on('unselected', function(e) {		})		.on('opened', function(e) {		})		.on('closed', function(e) {		});		/**		$('#tree1').on('loaded', function (evt, data) {		});		$('#tree1').on('opened', function (evt, data) {		});		$('#tree1').on('closed', function (evt, data) {		});		$('#tree1').on('selected', function (evt, data) {		});		*/});
	});
</script>
